import { Select } from "antd";
import * as React from "react";
import { connect } from "react-redux";
import { Dispatch } from "redux";
import { Reducers } from "../../../../../App";
import { ORDER_TYPE } from "../../interfaces";
import { setTableFilterAct } from "../../store/actions";
import { IReducerState_TableFilter } from "../../store/reducer";
const { Option } = Select;

interface IStateProps {
  filter: IReducerState_TableFilter;
}

interface IDispatchProps {
  setFilter: (filter: IReducerState_TableFilter) => void;
}

type IProps = IStateProps & IDispatchProps;

const SelectType: React.FC<IProps> = props => {
  const { filter, setFilter } = props;

  return (
    <Select
      allowClear
      style={{ width: 200 }}
      value={filter.type}
      onChange={(v: number) => {
        setFilter({ ...filter, type: v });
      }}
      placeholder="订单类型"
    >
      {ORDER_TYPE.map(item => (
        <Option key={item.id} value={item.id}>
          {item.value}
        </Option>
      ))}
    </Select>
  );
};

function mapStateToProps(state: Reducers): IStateProps {
  const reducer = state.userOrderReducer;
  return {
    filter: reducer.table_filter
  };
}

function mapDispatchToProps(dispatch: Dispatch): IDispatchProps {
  return {
    setFilter(filter: IReducerState_TableFilter) {
      const action = setTableFilterAct(filter);
      dispatch(action);
    }
  };
}

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(SelectType);
